<template>
  <m-window-frame
    title="新增元素"
    style="height: 100%"
    @cancel="handleCancel"
  >
    <div
      class="g-fd-c"
      style="height: 100%"
    >
      <AttrTips
        class="g-flex-0"
        :propertyGroupConfig="attrInfo"
        :type="''"
        background-image="statics/arch/theme/addtitlebg.png"
      ></AttrTips>
      <Step
        v-model="activeKey"
        :steps="steps"
        @stepValueChange="stepValueChange"
      ></Step>
    </div>
    <template v-slot:footer-right>
      <el-button
        size="small"
        :disabled="prevStepDisabled"
        @click="updateStep(-1)"
      >
        {{ "< " + $t(" 上一步") }}
      </el-button>
      <el-button
        size="small"
        :disabled="nextStepDisabled"
        @click="updateStep(1)"
      >
        {{ $t("下一步") + " >" }}
      </el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="okDisabled"
        @click="handleSave"
      >
        {{ $t("完 成") }}
      </el-button>
      <el-button
        size="small"
        @click="handleCancel"
      >
        {{ $t("取 消") }}
      </el-button>
    </template>
  </m-window-frame>
</template>

<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import AttrTips from "@/common/attrTip/AttrTip.vue";
import Step, { type StepItem } from "../createTableWizard/Step.vue";
import { ref, computed, markRaw, reactive, toRaw } from "vue";
import { useRoute } from "vue-router";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import TreeSelect from "@/modules/model/modals/modelTreeSelect/components/TreeSelect.vue";
import { PropertyDataType } from "@/mdesign-lib/mdesign-app.umd.js";
import DateAndTimeSetting from "../dateAndTimeSettingWindow/DateAndTimeSetting.vue";

const { projectId, moreBtnCondition } = useRoute().query;
if (!projectId) throw new Error("无法获取项目id");

const result = reactive({ modelClassifierId: "", startTime: "", endTime: "", timeLineId: "" });
const okDisabled = computed(() => !result.timeLineId);
const steps = ref<StepItem[]>([
  {
    key: "step1",
    name: "选择甘特图元素",
    description: "选择元素，并添加到甘特图中。",
    component: markRaw(TreeSelect),
    params: {
      loadMethod: "getPropertyTreeList",
      loadParams: {
        row: {
          dataType: PropertyDataType.INSTANCE,
          moreBtnCondition,
          key: "",
          modelId: moreBtnCondition,
          checkMethod: null,
          nullable: true
        },
        projectId
      },
      multiple: false,
      showNodeLabel: true,
      defaultSelectedId: ""
    }
  },
  {
    key: "step2",
    name: "设置开始时间",
    description: "设置开始时间",
    component: markRaw(DateAndTimeSetting),
    params: {
      projectId
    }
  },
  {
    key: "step3",
    name: "设置结束时间",
    description: "设置结束时间，结束时间需在开始时间之后",
    component: markRaw(DateAndTimeSetting),
    params: {
      projectId
    }
  }
]);
const activeKey = ref("step1");

const activeStep = computed(() => {
  return steps.value.filter(step => step.key === activeKey.value)[0];
});

const attrInfo = computed<{ name: string; description: string; icon: string }>(() => {
  return {
    name: activeStep.value.name as string,
    description: activeStep.value.description as string,
    icon: "statics/icons/attrTip/checkbox.svg"
  };
});

const currentStepIndex = computed(() => {
  return steps.value.findIndex(step => step.key === activeKey.value);
});

const prevStepDisabled = computed(() => {
  return currentStepIndex.value <= 0;
});

const nextStepDisabled = computed(() => {
  return currentStepIndex.value >= steps.value.length - 1;
});

const stepValueChange = (val: any, path: string[]) => {
  const from = path[0];
  if (path.includes("timeLine")) {
    result.timeLineId = val as typeof result.timeLineId;
  }
  if (from == "step1") {
    result.modelClassifierId = val?.length ? val[0] : ("" as typeof result.modelClassifierId);
  } else if (from == "step2" && path.includes("date")) {
    result.startTime = val as typeof result.startTime;
  } else if (from == "step3" && path.includes("date")) {
    result.endTime = val as typeof result.endTime;
  }
};

const updateStep = (num: number) => {
  activeKey.value = steps.value[currentStepIndex.value + num].key;
};

const handleSave = async () => {
  ipcWindowUtil.closeWindow({ success: true, result: toRaw(result) });
};

function handleCancel() {
  ipcWindowUtil.closeWindow({ success: false, result: toRaw(result) });
}
</script>
